import { useFragment, usePreloadedQuery } from "react-relay";
import { Outlet, useLocation, useNavigate } from "react-router";
import { graphql } from "relay-runtime";
import { css } from "@emotion/react";

import {
  Counter,
  Flex,
  Heading,
  LazyTabPanel,
  Link,
  Tab,
  TabList,
  Tabs,
  Text,
  View,
} from "@phoenix/components";

import { PromptLayout__main$key } from "./__generated__/PromptLayout__main.graphql";
import type { promptLoaderQuery as promptLoaderQueryType } from "./__generated__/promptLoaderQuery.graphql";
import { promptLoaderQuery } from "./promptLoader";
import { usePromptIdLoader } from "./usePromptIdLoader";

const mainCSS = css`
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .ac-tabs {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    div[role="tablist"] {
      flex: none;
    }
    .ac-tabs__pane-container {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      div[role="tabpanel"]:not([hidden]) {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
`;

export function PromptLayout() {
  const loaderData = usePromptIdLoader();
  const preloadedData = usePreloadedQuery<promptLoaderQueryType>(
    promptLoaderQuery,
    loaderData.queryRef
  );

  const navigate = useNavigate();
  const { pathname } = useLocation();
  let defaultTab = "prompt";
  if (pathname.includes("versions")) {
    defaultTab = "versions";
  } else if (pathname.includes("config")) {
    defaultTab = "config";
  }

  const data = useFragment<PromptLayout__main$key>(
    graphql`
      fragment PromptLayout__main on Prompt {
        id
        name
        description
        sourcePrompt {
          id
          name
        }
        promptVersions {
          edges {
            node {
              id
            }
          }
        }
      }
    `,
    preloadedData.prompt
  );

  return (
    <main css={mainCSS}>
      <View
        paddingStart="size-200"
        paddingEnd="size-200"
        paddingTop="size-100"
        paddingBottom="size-100"
        flex="none"
      >
        <Flex
          direction="row"
          justifyContent="space-between"
          alignItems="center"
        >
          <Flex direction="column">
            <Heading level={1}>{data.name}</Heading>
            {data.sourcePrompt && (
              <Text color="text-700">
                cloned from{" "}
                <Link to={`/prompts/${data.sourcePrompt.id}`}>
                  {data.sourcePrompt.name}
                </Link>
              </Text>
            )}
          </Flex>
        </Flex>
      </View>
      <Tabs
        defaultSelectedKey={defaultTab}
        onSelectionChange={(key) => {
          let url: string;
          if (key === "versions") {
            url = `/prompts/${data.id}/versions`;
          } else if (key === "config") {
            url = `/prompts/${data.id}/config`;
          } else {
            url = `/prompts/${data.id}`;
          }
          navigate(url);
        }}
      >
        <TabList>
          <Tab id="prompt">Prompt</Tab>
          <Tab id="versions">
            Versions <Counter>{data.promptVersions.edges.length}</Counter>
          </Tab>
          <Tab id="config">Config</Tab>
        </TabList>
        <LazyTabPanel id="prompt">
          <Outlet />
        </LazyTabPanel>
        <LazyTabPanel id="versions">
          <Outlet />
        </LazyTabPanel>
        <LazyTabPanel id="config">
          <Outlet />
        </LazyTabPanel>
      </Tabs>
    </main>
  );
}
